<template>
  <div>
    <h2 align="center">登录页面</h2>
    <table class="table table-borderd">
      <tr>
        <td align="right">用户名:</td>
        <td><input type="text" v-model="state.userName" /></td>
      </tr>
      <tr>
        <td align="right">密码：</td>
        <td><input type="password" v-model="state.userPwd" /></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input
            @click="login"
            type="button"
            value="登录"
            class="btn btn-success"
          />
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
//创建路由器
const router = useRouter();
//数据-------------------------
let data = reactive({
  state: {
    userName: '',
    userPwd: ''
  }
});

let { state } = toRefs(data);

//函数--------------------------------
//登录
// function login(){

// }

const login = () => {
  //思路：用户名和密码到数据库验证是否存在，如果存在，再判断是否完善过用户信息，如果
  //完善过。直接跳转到主页面，没有完善用户信息，跳转到用户信息页面完善用户信息
  //用户不存在，跳转到注册页面，注册用户，注册完再跳转到登录页面进行登录,跳用户完善信息页面
  //1.判断用户名和密码非空
  if (state.value.userName == '') {
    alert('用户名不能为空');
    return;
  }
  if (state.value.userPwd == '') {
    alert('密码不能为空');
    return;
  }
  //2.发送网络请求到后端验证
  axios({
    url: '/api/Users/GetUserLoain', //后端的接口地址
    method: 'get', //请求的方法（get  post...）
    params: {
      UL_Name: state.value.userName,
      UL_Pwd: state.value.userPwd
    } //如果是post,写data，如果是get请求写params  向后端传递的参数
  })
    .then((res) => {
      //成功之后的响应结果res
      console.log(res);
      if (res.data.data == null) {
        //用户不存在跳注册页面
        alert('用户不存在');
        router.push('/register');
      } else {
        //存在，判断是否完善过用户信息
        //用户详情根据id查询是否完善用户信息
        axios({
          url: '/api/Users/GetSearchUserInfo',
          method: 'get',
          params: {
            UL_Id: res.data.data.U_id
          }
        })
          .then((result) => {
            //请求成功
            console.log(result);
            if (result.data.data > 0) {
              //完善了
              alert('登录成功');
              router.push('/userInfo');
            } else {
              //未完善
              alert('请完善用户信息');
              router.push('/main');
            }
          })
          .catch((ettult) => {
            //请求失败
          });
      }
    })
    .catch((err) => {
      //请求失败之后的错误结果err
      console.log(err);
    });
};
</script>

<style scoped></style>
